<template>
  <div class="resource-basic-info">
    <a-descriptions :column="1" bordered>
      <a-descriptions-item label="资源名称">
        {{ resource?.name || '-' }}
      </a-descriptions-item>
      <a-descriptions-item label="资源编码">
        {{ resource?.code || '-' }}
      </a-descriptions-item>
      <a-descriptions-item label="资源类型">
        <a-tag :color="getResourceTypeColor(resource?.resource_type)">
          {{ resource?.resource_type || '-' }}
        </a-tag>
      </a-descriptions-item>
      <a-descriptions-item label="业务类型">
        <a-tag :color="getBusinessTypeColor(resource?.business_type)">
          {{ resource?.business_type || '-' }}
        </a-tag>
      </a-descriptions-item>
      <a-descriptions-item label="状态">
        <a-tag :color="getStatusColor(resource?.status)">
          {{ getStatusText(resource?.status) }}
        </a-tag>
      </a-descriptions-item>
      <a-descriptions-item label="描述">
        {{ resource?.description || '-' }}
      </a-descriptions-item>
      <a-descriptions-item label="创建时间">
        {{ formatDateTime(resource?.create_time) }}
      </a-descriptions-item>
      <a-descriptions-item label="更新时间">
        {{ formatDateTime(resource?.update_time) }}
      </a-descriptions-item>
      <a-descriptions-item label="创建者">
        {{ resource?.creator || '-' }}
      </a-descriptions-item>
    </a-descriptions>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import type { ResourceItem } from '#/api/resource-center';

interface Props {
  resource: ResourceItem | null;
}

const props = defineProps<Props>();

const getResourceTypeColor = (type?: string) => {
  switch (type) {
    case 'PHYSICAL':
      return 'blue';
    case 'VIRTUAL':
      return 'green';
    case 'SERVICE':
      return 'orange';
    default:
      return 'default';
  }
};

const getBusinessTypeColor = (type?: string) => {
  switch (type) {
    case 'HOTEL':
      return 'purple';
    case 'CAR_RENTAL':
      return 'cyan';
    default:
      return 'default';
  }
};

const getStatusColor = (status?: string) => {
  switch (status) {
    case 'ACTIVE':
      return 'success';
    case 'INACTIVE':
      return 'error';
    case 'MAINTENANCE':
      return 'warning';
    default:
      return 'default';
  }
};

const getStatusText = (status?: string) => {
  switch (status) {
    case 'ACTIVE':
      return '正常';
    case 'INACTIVE':
      return '停用';
    case 'MAINTENANCE':
      return '维护中';
    default:
      return '未知';
  }
};

const formatDateTime = (dateTime?: string) => {
  if (!dateTime) return '-';
  return new Date(dateTime).toLocaleString('zh-CN');
};
</script>

<style lang="less" scoped>
.resource-basic-info {
  .ant-descriptions-item-label {
    font-weight: 600;
    width: 120px;
  }
}
</style>
